<!--假期-编辑-->
<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="opNotice addvacationMerge">
    <div class="opNoticeTop">
      <div>编辑假期</div>
    </div>
    <div class="opNoticeMain">
      <div class="item">
        <div>假期名称
          <span>*</span>：</div>
        <div>
          <input type="text" maxlength="12" v-model="nameVal" :class="{redBorder:isRedReceiveVal,grayBorder:isGrayReceiveVal}" placeholder="请输入假期名称">
          <div id="inputTips" :class="{redTest:isRedReceiveVal,grayTest:isGrayReceiveVal}">请输入假期名称最多12个字符</div>
        </div>
      </div>

      <div class="item">
        <div>假期时段
          <span>*</span>：</div>
        <div>
          <el-date-picker type="daterange" :picker-options="pickerOptionsTime" size="small" value-format="timestamp" @change="timeChange" v-model="TimeVal" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </div>
      </div>
      <div class="item">
        <div>假期天数
          <span>*</span>：</div>
        <div>
          <input type="number" readonly v-model="dayVal" maxlength="35" :class="{redBorder:isReddayVal,grayBorder:isGraydayVal}" placeholder="输入请假天数">
          <!-- <div id="inputTips" :class="{redTest:isReddayVal,grayTest:isGraydayVal}">请输入标题(不能含特殊字符)</div> -->
        </div>
      </div>
      <div class="item">
        <div>是否倒班
          <span>*</span>：</div>
        <div>
          <el-switch v-model="isWorkShiftVal" @change="switchChange" active-color="#13ce66" inactive-color="#ff4949">
          </el-switch>
        </div>
      </div>
      <div class="itemList" v-show="isWorkShiftVal">
        <div class="item" v-for="(e,i) in dataItems" :key="i">
          <div>倒班时段({{i+1}})
            <span>*</span>：</div>
          <div>
            <el-date-picker type="daterange" size="small" :picker-options="pickerOptionsTime" value-format="timestamp" v-model="e.time" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div v-show="i != 0">
            <el-button type="primary" size="small" @click="delectClick(i)">删除</el-button>
          </div>
        </div>
        <div class="itemList-add">
          <el-button type="primary" size="medium" @click="addTimeClick">添加倒班时段</el-button>
        </div>
      </div>
      <div class="button">
        <el-button type="primary" size="medium" @click="saveClick">保存</el-button>
        <el-button type="info" size="medium" @click="cancelsClick">取消</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  components: {},
  data() {
    return {
      dataItems: [],

      orgIdVal: "",

      pickerOptionsTime: {
        disabledDate: function(time) {
          return time.getTime() < Date.now();
        }
      },

      nameVal: "", // 发送范围
      isRedReceiveVal: false,
      isGrayReceiveVal: true,

      TimeVal: "", // 发送范围
      isRedReceiveVal: false,
      isGrayReceiveVal: true,

      dayVal: "", // 标题
      isReddayVal: false,
      isGraydayVal: true,

      isWorkShiftVal: true, // 是否倒班

      saveClickTrueOrFalse: true,
      isShowSelectOrInput: false
    };
  },
  filters: {},
  created: function() {
    var self = this;
    self.orgIdVal = sessionStorage.getItem("ORGID");
    self.listFun();
  },
  mounted() {},
  methods: {
    switchChange(val) {
      if (val) {
        this.dataItems.push({ time: "" });
      } else {
        this.dataItems = [];
      }
    },
    // 列表
    listFun() {
      var self = this;
      var listObj = {
        id: self.$route.query.id
      };
      self
        .getapprovalholidaymanagementholidaydetail(listObj)
        .then(data => {
          if (data.statusCode == 200) {
            self.nameVal = data.data.name || "";
            self.dayVal = data.data.day || "";
            self.isWorkShiftVal = data.data.isWorkShift == 1 ? true : false;
            self.TimeVal = [data.data.startTime * 1, data.data.endTime * 1];
            if (data.data.item && data.data.isWorkShift == 1) {
              let itemArr = [];
              data.data.item.forEach((e, i) => {
                itemArr.push({ time: [e.startTime, e.endTime], id: e.id });
              });
              self.dataItems = itemArr;
            }
          } else if (data.statusCode == "200003") {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
            this.$router.push({
              path: "/login"
            });
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 删除倒班时段
    delectClick(index) {
      this.dataItems.splice(index, 1);
    },
    // 新增倒班时段
    addTimeClick() {
      this.dataItems.push({ time: "" });
    },
    // 假期天数计算
    timeChange(val) {
      var start = val[0]; //2017-4-10 10:00
      var end = val[1]; //2017-5-10 10:00
      var utc = end - start;
      this.dayVal = utc / (24 * 60 * 60 * 1000) + 1;
    },
    // 新增
    saveClick() {
      var self = this;
      if (self.validateFun() == false) {
        return false;
      } else {
        let itenTrue = false;
        this.dataItems.forEach(e => {
          if (e.time.length == 0) {
            itenTrue = true;
          }
        });
        if (this.TimeVal.length == 0) {
          self.$message({
            type: "info",
            message: "请选择假期时段"
          });
        } else if (itenTrue) {
          self.$message({
            type: "info",
            message: "请选择倒班时段"
          });
        } else {
          let timetrue = false;
          let itemtrue = false;
          let newStartDate = this.TimeVal[0];
          let newEndDate = this.TimeVal[1];
          this.dataItems.forEach((e, i) => {
            if (e.time[0] * 1 >= newStartDate && e.time[1] * 1 < newEndDate) {
              timetrue = true;
            } else if (
              e.time[0] * 1 >= newStartDate &&
              e.time[0] * 1 <= newEndDate
            ) {
              timetrue = true;
            } else if (
              e.time[1] * 1 >= newStartDate &&
              e.time[1] * 1 <= newEndDate
            ) {
              timetrue = true;
            }

            self.dataItems.forEach((et, it) => {
              if (it != i) {
                if (
                  e.time[0] * 1 >= newStartDate &&
                  e.time[1] * 1 < newEndDate
                ) {
                  itemtrue = true;
                } else if (
                  e.time[0] * 1 >= newStartDate &&
                  e.time[0] * 1 <= newEndDate
                ) {
                  itemtrue = true;
                } else if (
                  e.time[1] * 1 >= newStartDate &&
                  e.time[1] * 1 <= newEndDate
                ) {
                  itemtrue = true;
                }
              }
            });
          });
          if (timetrue) {
            self.$message({
              type: "info",
              message: "假期时段冲突！"
            });
          } else if (itemtrue) {
            self.$message({
              type: "info",
              message: "倒班时段冲突！"
            });
          } else {
            if (self.saveClickTrueOrFalse == true) {
              self.saveClickTrueOrFalse = false;
              let itemArr = [];
              this.dataItems.forEach(e => {
                itemArr.push(e.time);
              });
              var obj = {
                name: self.nameVal,
                day: self.dayVal,
                startTime: self.TimeVal[0],
                endTime: self.TimeVal[1],
                isWorkShift: self.isWorkShiftVal == false ? 0 : 1,
                item: itemArr,
                id: self.$route.query.id
              };
              var object = JSON.stringify(obj);
              self
                .getapprovalholidaymanagementedit(object)
                .then(data => {
                  self.saveClickTrueOrFalse = true;
                  if (data.statusCode == 200) {
                    self.$message({
                      type: "success",
                      message: "修改成功"
                    });
                    self.$router.push({
                      path: "/home/examine/vacationMerge"
                    });
                  } else if (data.statusCode == "200003") {
                    self.$message({
                      type: "info",
                      message: data.statusMessage
                    });
                    this.$router.push({
                      path: "/login"
                    });
                  } else {
                    self.$message({
                      type: "info",
                      message: data.statusMessage
                    });
                  }
                })
                .catch(msg => {
                  self.saveClickTrueOrFalse = true;
                  self.$message({
                    type: "info",
                    message: "服务器异常"
                  });
                });
            }
          }
        }
      }
    },
    // 验证
    validateFun() {
      var self = this;
      var regOne = /^[\s]*$/; //输入不能为空
      var regTwo = new RegExp(/^[\u4e00-\u9fa5]{1,12}$/);
      var regThree = new RegExp(
        "[+`~@#$^&*()=|{}\\[\\]<>/@#￥&*;（）——|{}【】]"
      );

      if (self.nameVal.length > 0) {
        self.isRedReceiveVal = false;
        self.isGrayReceiveVal = true;
      } else {
        self.isRedReceiveVal = true;
        self.isGrayReceiveVal = false;
      }
      if (regOne.test(self.dayVal) || regThree.test(self.dayVal)) {
        self.isReddayVal = true;
        self.isGraydayVal = false;
      } else {
        self.isReddayVal = false;
        self.isGraydayVal = true;
      }
      if (self.isReddayVal == true || self.isRedReceiveVal == true) {
        return false;
      }
    },
    // 关闭弹框
    cancelClick() {
      this.selectPopupShow = false;
    },
    // 取消
    cancelsClick() {
      var self = this;
      self.$router.push({
        path: "/home/examine/vacationMerge"
      });
    },
    ...mapActions([
      "getapprovalholidaymanagementedit",
      "getapprovalholidaymanagementholidaydetail"
    ])
  },
  watch: {
    dayVal(val) {
      if (val) {
        var strReg = new RegExp(
          "[+`~@#$^&*()=|{}\\[\\]<>/@#￥&*;（）——|{}【】]"
        );
        if (strReg.test(val) == true) {
          this.isReddayVal = true;
          this.isGraydayVal = false;
        } else {
          this.isReddayVal = false;
          this.isGraydayVal = true;
        }
      } else {
        this.isReddayVal = false;
        this.isGraydayVal = true;
      }
    }
  }
};
</script>
<style scoped="">
.itemList-add {
  width: 100%;
  margin-left: 55px;
  margin-top: 25px;
}

.itemList .item div:nth-child(3) {
  margin-left: 15px;
}

.itemList {
  width: 100%;
}

.opNotice {
  overflow: hidden;
  width: 100%;
  background-color: #fff;
  min-height: 500px;
  margin-bottom: 20px;
}

.opNoticeTop div {
  color: #303030;
  font-size: 14px;
  padding-top: 24px;
  padding-bottom: 12px;
  margin-left: 44px;
  width: calc(100% - 88px);
  border-bottom: 1px solid #d9d9d9;
}

.opNoticeTop {
  width: 100%;
}

.opNoticeMain {
  margin-left: 44px;
  width: calc(100% - 88px);
}

.opNoticeMain .item span {
  color: rgb(180, 16, 16);
}

.opNoticeMain .item input {
  width: 240px;
  height: 34px;
  border-radius: 4px;
  padding-left: 10px;
}

.opNoticeMain .item select {
  width: 280px;
  height: 34px;
  border-radius: 4px;
  padding-left: 20px;
  color: #8e8f94;
}

.opNoticeMain .item > div:nth-child(2) {
  margin-left: 15px;
}

.opNoticeMain .item > div:nth-child(1) {
  width: 100px;
  text-align: right;
}

#coverImgTips {
  /* color: #8f8e94; */
  padding-bottom: 10px !important;
}

.button {
  display: flex;
  justify-content: center;
  margin: 30px auto;
}

.button > .el-button {
  margin-right: 50px;
}

.button > div:nth-child(1) {
  background: #38adff;
}

.button > div:nth-child(2) {
  background: #8e8f94;
}

/* 编译器 */

.opNoticeMain .item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 24px;
}

#inputTips {
  display: inline;
  margin-left: 20px;
}

/* ***************************************************** */

.centerLeftBotOneI {
  width: 310px;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #000;
}

.selectPopup-but {
  height: 60px;
  width: 100%;
  background-color: #f0f6fa;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
}

.selectPopup-but > div:nth-child(2) {
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.slide-fade-enter-active {
  transition: all 0.7s ease;
}

.slide-fade-enter,
.slide-fade-leave-active {
  transform: translateY(-30px);
  opacity: 0;
}

.redBorder {
  border: 1px solid #38adff !important;
}

.grayBorder {
  border: 1px solid #d9d9d9 !important;
}

.redTest {
  color: #38adff !important;
}

.grayTest {
  color: #8e8f94 !important;
}

input::-webkit-input-placeholder {
  color: #8e8f94;
  font-size: 13px;
}

input::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #8e8f94;
  font-size: 13px;
}

input:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #8e8f94;
  font-size: 13px;
}

input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #8e8f94;
  font-size: 13px;
}
</style>